<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<meta charset="UTF-8">
<style>
    #d1{
        position:relative;
        float:left;
    }
    .box{
        width:84px;
        height:84px;
        background:red;
        position:absolute;
        left:0px;
        bottom:84px;
        opacity:0;
        cursor:pointer;
    }
    #num2{
        left:84px;
    }
    #num3{
        left:168px;
    }
    #jia{
        left:252px;
    }
    #dengyu{
        left:252px;
        bottom:0px;
    }
    #num{
        position:absolute;
        top:90px;
        left:0px;
        height:84px;
        width:335px;
        background:transparent;
        border:none;
        outline:none;
        text-align:right;
        color:white;
        font-size:60px;
    }
</style>
<div id="d1">
  <img src="cal.jpg" height="600"/>
    <input id="num" readonly />
    <div class="box" id="num1" onclick="show('1')"></div>
    <div class="box" id="num2" onclick="show('2')"></div>
    <div class="box" id="num3" onclick="show('3')"></div>
    <div class="box" id="jia" onclick="bianse()"></div>
    <div class="box" id="dengyu" onclick="jiSuan()"></div>
</div>
<script>
//将文本框的初值设置为0
num.value = "0";

//用户输入的第一个数
var num1;
//用户输入的第二个数
var num2;
//表示是否为新输入的数
var isNew = false;

function show(x){
    //如果文本框第一个数是0或者是新输入的数
    if(num.value.indexOf("0")==0||isNew){
        //把文本框清空
        num.value = "";
        //将运算符状态还原
        jia.style.opacity = 0;
        //将isNew设为false
        isNew = false;
    }

    //串接成新的数值
    num.value = num.value + x;
}

function bianse(){
    jia.style.opacity = 0.2;
    //记住第一个数字
    num1 = parseInt(num.value);
    //并设置下一次输入为新输入
    isNew = true;
}

function jiSuan(){
    //记住第二数
    num2 = parseInt(num.value);
    //显示结果
    num.value = num1 + num2;
}

</script>
	</body>
</html>
